<!-- 【出库信息】管理页面 -->
<template>
  <div class="body">
    <el-dialog :title="dialog.title" :close-on-click-modal="false" :visible.sync="dialog.open">
      <!-- 表格区域 -->
      <el-table border :header-cell-style="{background:'#f4f4f5'}" :height="600" v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
        <el-table-column label="id" prop="id" v-if="false"/>
        <el-table-column label="序号" type="index" width="50"/>
        <el-table-column label="供应商名称" prop="supplierId" sortable>
          <template slot-scope="scope">
            <span-label :dict="supplierDict" :value="scope.row.supplierId" label="name"></span-label>
          </template>
        </el-table-column>
        <el-table-column label="物品名称" prop="goodsId" sortable>
          <template slot-scope="scope">
            <span-label :dict="goodsDict" :value="scope.row.goodsId" label="name"></span-label>
          </template>
        </el-table-column>
        <el-table-column label="出库数量" prop="number" sortable/>
        <!--<el-table-column label="出库备注" prop="remarks" show-overflow-tooltip sortable/>-->
        <el-table-column label="操作人" prop="userId" sortable>
          <template slot-scope="scope">
            <span-label :dict="sysUserDict" :value="scope.row.userId" label="userName"></span-label>
          </template>
        </el-table-column>
        <el-table-column label="出库时间" prop="deliveryTime" sortable/>
      </el-table>
      <!-- 分页区域 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :background="true"
          :current-page="queryForm.current"
          :page-sizes="[5,10,20,30,50]"
          :page-size="queryForm.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>

<script>
    export default {
      data() {
        return {
          //弹窗设置
          dialog: {
            title: "",
            open: false,
            disabled: false
          },
          loading: true,//是否加载完成
          selectedData: [],//勾选数据
          total: 0, //记录数
          supplierDict: [],
          goodsDict: [],
          sysUserDict: [],
          dataList: [],
          queryForm: {
            current: 1,
            size: 10,
            id: "",
            supplierId: "",
            goodsId: "",
            number: "",
            deliveryTimeRange: [],
            deliveryTime: "",
            userId: "",
            remarks: "",
          }
        };
      },
      methods: {
        //打开弹窗
        open(option) {
          const pageFrom = option.pageFrom;
          const disabled = pageFrom == 'view' ? true : false;
          this.showDialog(option.title, disabled);
          //初始化数据
          this.queryForm.goodsId = option.goodsId;
          this.getList();
          //初始化【供应商名称】
          this.getSupplierDict();
          //初始化【物品名称】
          this.getGoodsDict();
          //初始化【操作人】
          this.getSysUserDict();
        },
        //显示弹窗
        showDialog(title, disabled) {
          this.resetForm(this.$refs.stockForm);//重置表单
          this.dialog.open = true;//打开弹窗
          this.dialog.title = title;//设置标题
          this.dialog.disabled = disabled;//是否可编辑
        },
        //取消弹窗
        cancel: function () {
          this.dialog.open = false;
        },
        //点击搜索
        handleQuery() {
          this.queryForm.current = 1;
          this.getList();
        },
        //查询列表数据
        getList() {
          this.$request.doGet('/admin/delivery/getPage', this.queryForm).then(res => {
            if (res.isOk) {
              this.loading = false;
              this.dataList = res.obj.records;
              this.total = res.obj.total;
            }
          });
        },
        //【供应商名称】
        getSupplierDict() {
          this.$request.doGet('/admin/supplier/getList').then(res => {
            if (res.isOk) {
              this.supplierDict = res.list;
            }
          });
        },
        //【物品名称】
        getGoodsDict() {
          this.$request.doGet('/admin/goods/getList').then(res => {
            if (res.isOk) {
              this.goodsDict = res.list;
            }
          });
        },
        //【操作人】
        getSysUserDict() {
          this.$request.doGet('/admin/sysUser/getList').then(res => {
            if (res.isOk) {
              this.sysUserDict = res.list;
            }
          });
        },
        //重置查询
        resetQuery() {
          this.$refs['queryForm'].resetFields();
          this.handleQuery();
        },
        //打开弹窗
        openDialog(option) {
          this.$refs.deliveryDialog.open(option);
        },
        //选择页数
        handleSizeChange: function (size) {
          this.queryForm.size = size;
          this.getList();
        },
        //选择页码
        handleCurrentChange: function (currentPage) {
          this.queryForm.current = currentPage;
          this.getList();
        },
        //获取勾选数据
        handleSelectionChange(data) {
          this.selectedData = data;
        },
        //批量删除
        handleDeleteAll() {
          const that = this;
          that.showConfirm('确定删除选中的数据吗?', function () {
            if (that.selectedData.length > 0) {
              let ids = that.selectedData.map(function (v) {return v.id});
              that.$request.doGet('/admin/delivery/delAll', {ids: ids}).then(res => {
                if (res.isOk) {
                  that.showSuccess("删除成功");
                  that.getList();
                }
              });
            } else {
              that.showWarn("至少选择一条数据！");
            }
          });
        },
        //选中行删除
        handleDelete(id) {
          const that = this;
          that.showConfirm('确定删除选中的数据吗?', function () {
            that.$request.doGet('/admin/delivery/delete?id=' + id).then(res => {
              if (res.isOk) {
                that.showSuccess("删除成功");
                that.getList();
              }
            });
          });
        }
      }
    };
</script>
